<template>
  <div>
    <van-grid :column-num="2" :gutter="10">
      <van-grid-item v-for="(item, index) in list" :key="index">
        <van-image :src="item.img" />
        <span>{{ item.desc }}</span>
        <div class="foot">
          <span>{{ item.name }}</span
          ><van-icon name="add-o" @click="add(item)" />
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  props: {
    list: Array,
  },
  methods: {
    add(val) {
      let bool = this.$store.state.runRead.some((item) => item == val.name);
      if (bool) {
        Toast("书架已有此书！");
        return;
      }
      Toast("添加成功！");
      this.$store.commit("addList", val.name);
      // console.log(val);
    },
  },
};
</script>